<template>
  <VCharts v-if="renderChart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<script setup>
const props = defineProps({
  名称: {
    type: String,
    default: ""
  },
  单项组: {
    type: Array,
    default: []
  },
  height: {
    type: String,
    default: '300px',
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
})
import { ref, nextTick, reactive, watch, computed } from 'vue';
import VCharts from 'vue-echarts';

import { useWindowResize } from '@/hooks/use-windows-resize'

const renderChart = ref(false);
nextTick(() => {
  renderChart.value = true;
});
useWindowResize(() => {
  renderChart.value = false;
  nextTick(() => {
    renderChart.value = true;
  });
})
import * as util from '@/amtf/utils';

// 取消的话，没法mark point
import { graphic } from 'echarts'

const 名称 = ref(props.名称)
const 单项组 = reactive(props.单项组)

let 插值点序号 = 0
let max流量 = 0
let max扬程 = 0
let maxNPSHr = 0
const max效率 = 100;

function 予option() {
  if (!util.某对象等于某值否(单项组, '流量', 0)) {
    单项组.unshift({ 流量: 0, 扬程: 0, 效率: 0 });
  }
  插值点序号 = util.查找元素序号(单项组, 0)
  console.log(`插值点序号 👉`, 插值点序号)
  const 插值项 = 单项组[插值点序号]
  console.log(`插值项.流量 👉`, 插值项.流量)

  // 找出各指标的最大值
  max流量 = Math.max(...单项组.map(point => point.流量));
  max扬程 = Math.max(...单项组.map(point => point.扬程));
  const filteredDataPoints = 单项组.filter(point => point.NPSHr !== undefined);
  maxNPSHr = Math.max(...filteredDataPoints.map(point => point.NPSHr));
  max流量 = roundUpValue(max流量);
  max扬程 = roundUpValue(max扬程);
  maxNPSHr = roundUpValue(maxNPSHr) * 2;
}
予option()

watch(() => props.单项组, (newValue, oldValue) => {
  // console.log(`单项组变化 ing👇`)
  util.数组重予(单项组, props.单项组)
  // console.log(`单项组 👉`, 单项组)
  予option()
})

const option = computed(() => ({
  title: {
    text: 名称.value + '性能参数',
    left: 10,
    textStyle: {
      userSelect: true // 设置为 true 表示可以选中文字
    }
  },
  grid: {
    bottom: 35, // 调整底部距离，单位是像素
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      let tooltipContent = `<div>流量: ${params[0].axisValue} m³/h</div>`;
      params.forEach(item => {
        let seriesName = item.seriesName;
        let value = item.value[1];
        if (seriesName === '扬程') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: 扬程 ${value} m<br>`;
        } else if (seriesName === '效率') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: 效率 ${value} %<br>`;
        } else if (seriesName === 'NPSHr') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: NPSHr ${value} m<br>`;
        }
      });
      return tooltipContent;
    }
  },
  legend: {
    data: ['扬程', '效率', 'NPSHr']
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'value',
      name: '流量(m³/h)',
      nameLocation: 'middle',
      nameGap: 20,
      min: 0,
      max: max流量,
      splitNumber: 10,
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 2
        }
      },
      minorTick: {
        show: true,
        lineStyle: {
          color: '#ccc'
        }
      },
      minorSplitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '扬程(m)',
      min: 0,
      max: max扬程,
      splitNumber: 12,
      axisTick: {
        show: true,
        interval: 10,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        show: true
      }
    },
    {
      type: 'value',
      name: '效率',
      min: 0,
      max: max效率,
      splitNumber: 10,
      axisTick: {
        show: true,
        interval: 10,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        formatter: '{value}%'
      },
      position: 'left',
      offset: 40
    },
    {
      type: 'value',
      name: 'NPSHr(m)',
      min: 0,
      max: maxNPSHr,
      splitNumber: 5,
      axisTick: {
        show: true,
        interval: 1,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        formatter: '{value} m'
      },
      scale: true,
    }
  ],
  series: [
    {
      name: '扬程',
      type: 'line',
      smooth: true,
      data: 单项组.map(point => [point.流量, point.扬程]),
      markPoint: {
        data: [
          {
            name: '特殊点',
            xAxis: 单项组[插值点序号].流量,
            yAxis: 单项组[插值点序号].扬程,
            label: {
              show: true,
              formatter: function (params) {
                return 单项组[插值点序号].扬程;
              }
            }
          }
        ]
      },
      yAxisIndex: 0
    },
    {
      name: '效率',
      type: 'line',
      smooth: true,
      data: 单项组.map(point => [point.流量, point.效率]),
      markPoint: {
        data: [
          {
            name: '特殊点',
            xAxis: 单项组[插值点序号].流量,
            yAxis: 单项组[插值点序号].效率,
            label: {
              show: true,
              formatter: function (params) {
                return 单项组[插值点序号].效率;
              }
            }
          }
        ]
      },
      yAxisIndex: 1
    },
    {
      name: 'NPSHr',
      type: 'line',
      smooth: true,
      data: 单项组.map(point => [point.流量, point.NPSHr]),
      markPoint: {
        data: [
          {
            name: '特殊点',
            xAxis: 单项组[插值点序号].流量,
            yAxis: 单项组[插值点序号].NPSHr,
            label: {
              show: true,
              formatter: function (params) {
                return 单项组[插值点序号].NPSHr;
              }
            }
          }
        ]
      },
      yAxisIndex: 2
    }
  ]
}));

function roundUpValue(value) {
  let temp = value * 1.05;
  // console.log(`temp 👉`, temp)
  let 梯度值 = Math.ceil(temp / 100)
  // console.log(`梯度值 👉`, 梯度值)
  return Math.ceil(temp / 梯度值) * 梯度值;
}
</script>
